<html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!-- jQuery -->
    <script type="text/javascript" src="../js/jquery-1.11.0.min.js"></script>
    <script type="text/javascript" src="../js/jquery-3.3.1.js"></script>

    <!-- Bootstrap -->
    <link href="../bootstrap-3.3.7-dist/css/bootstrap.min.css" rel="stylesheet">
    <!-- 加载 Bootstrap 的所有 JavaScript 插件。你也可以根据需要只加载单个插件。 -->
    <script src="../bootstrap-3.3.7-dist/js/bootstrap.min.js"></script>

    <style type="text/css">

        #title {
            background-color: cornflowerblue;
        }

        .row-margin-top {
            margin-top: 10px;
        }

        html {
            overflow-x: hidden;
            overflow-y: auto;
        }

        .list {
            height: 290px;
            width: 250px;
            margin: 10px;
            padding: 20px;
            float: left;
            border: 1px #e3e3e3 solid;
        }

        .img_div {
            height: 250px;
            text-align: center;
        }

        .img {
            height: 230px;
            width: 220px;
        }

        .info {
            text-align: center;
        }

        #footer {
            text-align: center;
            font-size: 20px;
            position: relative;
            bottom: 10px;
        }

        #myInfo {
            font-family: 微软雅黑;
            font-size: large;
            color: blue;
        }

        .carousel-inner > .item > img {
            width: 100%; /* Or try to use important */
            height: 400px;
        }

    </style>

</head>
<body>

<<<<<<< HEAD

=======
>>>>>>> f2e1d5e2c2e292c2ca23a9ccf23175bb333046ea
<!--页面主体-->
<div class="container-fluid">
    <div class="row " id="title">

        <div class="col-md-1 row-margin-top" id="play">
            <button id="back" class="btn btn-info btn-lg active"><span class="glyphicon  glyphicon-arrow-left"
                                                                       aria-hidden="true"></span>&nbsp;返回
            </button>

        </div>

        <div class="col-md-4 col-md-offset-3" id="ttms">
            <h1>欢 迎 光 临 T T M S 影 院 </h1>
        </div>

        <div class="col-md-1 col-md-offset-2 row-margin-top">
            <a href="myInfo.html">
                <button id="myInfo" class="btn btn-link btn-lg "><span class="glyphicon glyphicon-user"
                                                                       aria-hidden="true"></span>&nbsp;
                </button>
            </a>
        </div>

    </div>

    <div class="row row-margin-top">
        <div class="col-md-12">
            <div class="col-md-2">
                <input type="text" class="form-control" id="select_input" placeholder="请  输  入  电  影  名  称"
                       name="playName">
            </div>
            <div class="col-md-1">
                <button id="select_button" class="btn btn-success btn-sm"><span class="glyphicon glyphicon-search"
                                                                                aria-hidden="true"></span>搜索
                </button>
            </div>

            <div class="col-md-1 col-md-offset-10">
                <a href="refundView.html">
                    <button class="btn btn-link btn-lg "><span class="glyphicon glyphicon-list-alt"
                                                               aria-hidden="true"></span>&nbsp;我的电影票
                    </button>
                </a>
            </div>

        </div>
    </div>


    <div class="row" id="saled">
        <div class="col-md-3 col-md-offset-5">
            <h1>正在热映</h1>
        </div>
    </div>

    <div class="row row-margin-top" id="showCarousel">
        <div class="col-md-8 col-md-offset-2">
            <div id="carousel-example-generic" class="carousel slide" data-ride="carousel">

                <!-- Wrapper for slides -->
                <div class="carousel-inner" role="listbox" id="picture">

                </div>

            </div>

            <!-- Controls -->
            <!--<a class="left carousel-control" href="#carousel-example-generic" role="button" data-slide="prev">-->
            <!--<span class="glyphicon glyphicon-chevron-left" aria-hidden="true"></span>-->
            <!--<span class="sr-only">Previous</span>-->
            <!--</a>-->
            <!--<a class="right carousel-control" href="#carousel-example-generic" role="button" data-slide="next">-->
            <!--<span class="glyphicon glyphicon-chevron-right" aria-hidden="true"></span>-->
            <!--<span class="sr-only">Next</span>-->
            <!--</a>-->
        </div>


    </div>
</div>

<div class="row row-margin-top">
    <div class="col-md-3 col-md-offset-5">
        <h1>电影大全</h1>
    </div>
</div>

<div class="row">
    <div class="col-md-8 col-md-offset-2" id="main">

    </div>
</div>


<div class="row row-margin-top">
    <!-- 分页条信息 -->
    <div id="page_nav" class="col-md-4 col-md-offset-5">
    </div>
</div>

<div class="row row-margin-top">
    <!--分页信息  -->
    <div id="page_info" class="col-md-4 col-md-offset-5">
        </ul>
        <div class="page_num_inf">共
            <span id="totalPage_span">12</span>页<span id="totalCount_span">132</span>条
        </div>
        <nav>
            <div class="pageNum">
                <ul id="routePage_ul" class="pagination">

                </ul>
            </div>
        </nav>
    </div>
</div>
<!--页脚-->
<div class="row">
    <div id="footer" class="col-md-12">
        <hr style="height:1px;border:none;border-top:1px solid #555555;"/>
        <span>CopyRight@2020</span>
    </div>
</div>
</div>
</body>

</html>


<script>


    $(function () {

                //正在热映
                hot()

                //页面影片图片展示
                findPlay(1, 6);
                //搜索图片展示
                searchMovie()
                //点击返回返回到 登陆页面
                $("#back").click(function () {
                    location.href = "http://localhost:8080/cinema/"

                })

    })

    //正在热映
    function hot() {
        $.ajax({
            url: "../play/findHot",
            type: "type",
            success: function (data) {
                var picture = ''
                $.each(data, function (ind, ele) {
                    picture += '<a href="scheduleView.html?playName=' + ele.playName + '"><img  class="img_hot list " src="../images/' + ele.playImage + '.jpg"></a>\n'
                })
                $("#picture").html(picture)
            },
            dataType: "json"

        })


    }


    //搜索框
    function searchMovie() {
        $("#select_button").click(function () {
            var playName = $("#select_input").val();
            if (playName == null || playName == "") {
                alert("电影名称不能为空");
                return;
            }
            location.href = "SearchPlay.html?playName=" + playName;

        })
    }

    //页面上电影展示
    function findPlay(currentPage, rows) {
        $.ajax({
            url: "../play/findMovie",
            type: "post",
            data: {"currentPage": currentPage, "rows": rows},
            success: function (data) {
                console.log(11)
                //共有的页数和条数
                $("#totalPage_span").html(data.totalPage);
                $("#totalCount_span").html(data.totalCount);

                //判断上一页
                var prePage = currentPage - 1;
                if (prePage < 1) {
                    prePage = 1
                }

                //判断下一页
                var nextPage = currentPage + 1;
                if (nextPage > data.totalPage) {
                    nextPage = data.totalPage
                }

                //第几页的拼接
                var routePage_ul = ''
                routePage_ul += ' <li><a href="javascript:findPlay(1,' + rows + ')">首页</a></li>\n' +
                    '                    <li class="threeword"><a href="javascript:findPlay(' + prePage + ',' + rows + ')">上一页</a></li>'
                for (var i = 1; i <= data.totalPage; i++) {
                    // routePage_ul += '<li><a href="javascript:findPlay()">' + i + '</a></li>\n'

                    if (currentPage == i) {
                        routePage_ul += '<li class="curPage"  onclick="findPlay(' + i + ',' + rows + ')"><a href="javascript:findPlay(' + i + ',' + rows + ')">' + i + '</a></li>';
                    } else {
                        routePage_ul += '<li ><a href="javascript:findPlay(' + i + ',' + rows + ')">' + i + '</a></li>';

                    }


                }
                routePage_ul += ' <li class="threeword"><a href="javascript:findPlay(' + nextPage + ',' + rows + ')">下一页</a></li>\n' +
                    '                    <li class="threeword"><a href="javascript:findPlay(' + data.totalPage + ',' + rows + ')">末页</a></li>'

                $("#routePage_ul").html(routePage_ul)


                //页面图片的拼接
                var main = ''
                for (var i = 0; i < data.list.length; i++) {
                    main += ' <div class="list">\n' +
                        '            <div class="img_div">\n' +
                        '                <a href="/cinema/pages/scheduleView.html?playName=' + data.list[i].playName + '">\n' +
                        '                    <img src="../images/' + data.list[i].playImage + '.jpg" class="img img-rounded">\n' +
                        '                </a>\n' +
                        '                <div class="info">\n' +
                        '                    <span class="sp1">' + data.list[i].playName + '</span>\n' +
                        '                </div>\n' +
                        '            </div>\n' +
                        '        </div>'
                }
                $("#main").html(main)
            },
            dataType: "json"

        })

    }


</script>